<template>
  <div class="body">
    <div class="loginbox">
      <div class="flex con">
        <!-- <div class="left-box">
          <el-image :src="'/images/login_bg.png'" class="left-box-img" :fit="'cover'"></el-image>
          <div class="text-content">
              <h3 class="e-m-0">区块链电子劳动合同</h3>
              <h3>签约平台</h3>
              <div class="s_text e-p-t-10">提升合同签署效率</div>
              <div class="s_text">降低虚假合同签署、萝卜章等风险</div>
              <div class="s_text">提供在线司法出证，服务电子签约最后一公里</div>
          </div>
        </div> -->
        <div class="right-box">
          <div class="logon">
            <div class="logo">
            	<el-image :src="fileURL+websetting.sitelogoimg" :fit="'contain'" style="width: 70px;height: 78px;"></el-image>
            </div>
            <h1 class="e-m-b-15">欢迎使用{{websetting.name}}</h1>
            <div class="inputtext">
              <div class="text-center e-p-b-15">账号注册</div>
              <el-form :label-position="labelPosition" label-width="100px" ref="form" :model="form" :rules="rules" @submit.native.prevent>
                <el-form-item prop="name">
                  <el-input v-model="form.name" prefix-icon="el-icon-s-custom" placeholder="请输入姓名" class="form-input">
                  </el-input>
                </el-form-item>
                <el-form-item  prop="mobile">
                  <el-input v-model="form.mobile" placeholder="手机号码为必填项且应为11位数字" prefix-icon="el-icon-phone"></el-input>
                </el-form-item>
                <el-form-item  prop="mobilecaptcha">
                	<el-input v-model="form.mobilecaptcha" placeholder="请输入您接收到的验证码" prefix-icon="el-icon-lock">
                		<template slot="append">
                			<el-button type="primary" @click="getCode" :disabled="getCodeBtn">{{getCodeText}}</el-button>
                		</template>
                	</el-input>
                </el-form-item>
              </el-form>

              <div class="bottomtips">
                <el-checkbox v-model="checked" class="tips1">我已知悉并同意接受</el-checkbox>
                <a href="javascript:;" @click="goiframe('/admin/home/privacyPolicy/','用户隐私政策协议')">《用户隐私政策协议》</a>及<a href="javascript:;" @click="goiframe('/admin/home/regAgreement/','用户注册协议')">《用户注册协议》</a>
              </div>
              <el-button type="primary" class="button" @click="onSubmit" :disabled="!checked"> 注册</el-button>
              <div class="e-font-12 text-center e-p-t-15">
                使用已有账号
                <nuxt-link :to="'/login/'">直接登录</nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 这里是主体部分 -->
    </div>
    <div class="footer e-font-14 text-center">
      <a href="https://beian.miit.gov.cn" class="footer"><span>{{websetting.copyright}}</span></a>
    </div>
   <div class="dialogPage">
     <el-dialog :title="iframe.title" :visible.sync="dialogVisible" width="1200px">
       <iframe :src="iframe.link" width="1100px" height="600px" style="border: 0;" ref="iframe" class="dialog-text"></iframe>
     </el-dialog>
   </div>
   <div class="dialogCode">
     <el-dialog  title="验证" :visible.sync="dialogVisible2" width="400px" >
       <div class="main" @click="getGuiCode()" style="cursor: pointer;">
         <el-image style="width: 100%; height: auto" :src="countCodeImg" fit="fill" class="images" ref="countCodeImg"></el-image>
       </div>
       <div class="inputCode">
           	<el-input v-model="code" placeholder="请输入图片中的结果" class="input" ></el-input>
             <el-button type="primary" @click="decideCode" class="button e-m-l-15">确 定</el-button>
       </div>
       <!-- <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible1 = false">取 消</el-button>
         <el-button type="primary" @click="decideCode">确 定</el-button>
       </span> -->
     </el-dialog>
   </div>
   <slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" @refresh="refresh" @close="close" :pintuImg="pintuImg"
   :pintukuai="pintukuai" :ynumber="ynumber" ref="verifyElement"></slider-verify>
  </div>
</template>

<script>
  export default {
  	head() {
  		return {
  			title: '注册-'+this.websetting.name,
  		}
  	},
  	data() {
  		return {
        countCodeImg:'',//验证码图片,
        code:"",//发送短信验证码
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        checked: true,
        labelPosition: 'top',
  			dialogVisible: false,
  			dialogVisible1: false,
        dialogVisible2:false,
  			getCodeBtn: false,
  			getCodeText: '点击获取验证码',
  			enterprisetype: [],
  			form: {
  				name: '',
  				identitycard: '',
  				mobile: '',
  				mobilecaptcha: '',
  				agreement: []
  			},
  			rules: {
  				name: [{
  					required: true,
  					message: '请填写真实姓名',
  					trigger: 'blur'
  				}],
  				mobile: [{
  					required: true,
  					message: '请填写手机号码',
  					trigger: 'blur'
  				}],
  				mobilecaptcha: [{
  					required: true,
  					message: '请填写短信验证码',
  					trigger: 'blur'
  				}],
  				agreement: [
  				  { type: 'array', required: true, message: '请勾选同意协议', trigger: 'change' }
  				]
  			},
        iframe:{
          link: '',
          title: ''
        },
        // 滑块验证参数
        sliderVerifyFLag: false,
        pintuImg: '',
        pintukuai: '',
        ynumber: 0
  		}
  	},
  	methods: {
      // 获取滑块验证信息
      getSlideCaptch() {
      	this.$axios.get('/SlideCaptch/GetSlideCaptch').then((res) => {
      		this.pintuImg = res.src1
      		this.pintukuai = res.src2
      		this.ynumber = res.ynumber
      		this.form.guid = res.guidid
      		this.sliderVerifyFLag = true
      	})
      },
      // 滑块验证结果回调函数
      verifyResult(oldx) {
      	this.code = Math.round(oldx);
      	this.decideCode()
      },
      // 关闭滑块验证弹窗
      close(state){
      	this.sliderVerifyFLag = state
      },
      // 刷新滑块验证
      refresh(){
      	this.getSlideCaptch();
      },
      decideCode(){
        this.$axios.get('/Account/RegSendMobileCaptcha?mobile='+this.form.mobile+'&guid=' + this.form.guid + '&countresult=' + this.code).then((res) => {
            if(res){
              this.sliderVerifyFLag = false;
              this.code = ""
              this.$message.success(res.msg);
              	let time = 60
              	let timer = setInterval(()=>{
              		this.getCodeBtn = true
              		--time
              		this.getCodeText = time+'秒后重新获取'
              		if(time == 0){
              			this.getCodeBtn = false
              			this.getCodeText = '点击获取验证码'
              			clearInterval(timer)
              		}
              	},1000)
            }else{
              this.getSlideCaptch();
            }
        }).catch((res) => {
          this.$refs.verifyElement.refreshVerify();
          this.code = ""
        })
      },

      getGuiCode() {
        this.$axios.get('/Captch/GetCountGuid').then((res) => {
          this.form.guid = res.guid;
          if(this.countCodeImg == '') {
            this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid;
          }
          else{
            // this.$refs.countCodeImg.src = this.baseURL + '/Captch/CountCode?guid' + res.guid;
            this.countCodeImg = this.baseURL + '/Captch/CountCode?guid=' + res.guid
            // console.log(this.baseURL + '/Captch/CountCode?guid' + res.guid)
          }
        })
      },

  		getCode(){
        // if(this.form.mobile == ''){
        //   this.$message.error('请输入手机号');
        //   return
        // }
        // this.dialogVisible2 = true;
        // this.getGuiCode()
        if (this.form.mobile == '') {
        	this.$message.error('请输入手机号');
        	return
        }
        this.getSlideCaptch()
  		},
      onSubmit() {
      	this.$refs.form.validate((valid) => {
      		if (valid) {
      			this.$axios.post('/account/registeruser', this.form).then((res) => {
      				this.$message.success(res.msg);
      				this.$router.push({
      					path: '/login/'
      				})
      			})
      		} else {
      			return false;
      		}
      	})
      },
      goiframe(url,title){
        this.iframe.link = url;
        this.iframe.title = title;
        this.dialogVisible = true
      }
  	}
  }
</script>
<style scoped>
    .dialogPage >>> .el-dialog__body{
      padding: 0px;
    }
   .dialogPage >>> .el-dialog__header{
          padding: 20px 20px 0px;
    }
</style>
<style lang="scss" scoped>
  //   .inputitem >>> .el-form-item__label{
  //   padding: 0px;
  // }
  .dialogCode{
    .main{
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--grey);
    }
    .inputCode{
      margin-top: 20px;
      display: flex;
      align-items: center;
      .input{

      }
      .button{

      }
    }
  }
  .dialog-text{
    padding-left: 48px;
    padding-bottom: 30px;
  }
  .bg-box {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }

  #myCanvas {
    background: none;
    border: 1px none;
    display: block;
    height: 100%;
    width: 100%;
  }

  .body {
      background-color: var(--light)
  }

  .loginbox {
    width: 1200px;
    height: calc(100vh - 40px);
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    .con{
      box-shadow: 0 2px 12px 0 #0000002e;
      height: 584px;
      .left-box{
        background-color: #f3faff;
        position: relative;

        .text-content{
          position: absolute;
          top: 0;
          width: 100%;
          padding: 93px 50px;
          box-sizing: border-box;
          h3{
            font-size: 28px;
            margin-top: 0;
            margin-bottom: 15px;
            font-weight: inherit;
          }
          .s_text{
            color: var(--gray);
            line-height: 24px;
          }
        }
      }
      .left-box-img{
        transform: scale(0.85);
        width: 470px;
        height: 100%;
      }
      .right-box{
        overflow: hidden;
      .logon{
           padding: 0px 44px 24px;
           height: 100%;
           width: 470px;

           .logo {
           	width: 70px;
           	height: 70px;
           	margin: 0 auto;
           	color: var(--red);
           	font-size: 70px;
             line-height: 70px;
             padding-top: 24px;
           }

      }
      }
    }
    .header {
      height: 50px;
      width: 100%;

      .img {
        width: 100px;
        height: 50px;
        float: left;
      }
    }

    .logon {
      width: 500px;
      height: 100%;
      background-color: white;
      margin: 0 auto;
      padding: 25px 25px 24px;
      box-sizing: border-box;
      position: relative;
      z-index: 1;

      h1{
        width: 100%;
        text-align: center;
        font-weight: 700;
        font-size: 24px;
        color: #283548;
      }

      .inputtext {
        margin-top: 36px;
        position: relative;

        .inputitem {
          margin-bottom: 5px;

        }

        span {
          font-size: 12px;
          color: var(--gray);
        }

        #eyes {
          position: absolute;
          right: 15px;
          top: 253px;
          color: var(--blue);

          &:hover {
            cursor: pointer;
          }
        }

        .button {
          width: 100%;
          margin: 0 auto;
          margin-top: 15px;
        }

        .bottomtips {
          font-size: 12px;

          span {
            color: black;
          }
        }
      }
    }
  }
</style>
